<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3,
        p {
            display: none;
        }
    </style>
</head>

<body>

    <div class="box">
        <h3>欢迎XX登录</h3>
        <span class="loginOut">退出登录</span>
        <span class="delete">注销账号</span>
    </div>
    <p>
        <a href="./10reg.html">注册</a>
        <a href="./11login.html">登录</a>
    </p>


    <table border="1">
        <thead>
            <tr>
                <td>用户名</td>
                <td>密码</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>aa</td>
                <td>123</td>
                <td>
                    <button>删除</button>
                    <button>修改</button>
                </td>
            </tr> -->
        </tbody>
    </table>



    <script src="../js/cookie.js"></script>
    <script>

        const oP = document.querySelector('p');
        const oH = document.querySelector('h3');
        const oOut = document.querySelector('.loginOut');
        const oDel = document.querySelector('.delete');

        // 判断用户名是否登录
        //    查看cookie中是否有  LOGIN_USER
        const res = getCookie('LOGIN_USER');
        console.log(res);
        if (res) {
            oH.style.display = 'block';
            oH.innerHTML = `欢迎${res}登录`;
        } else {
            oP.style.display = 'block';
        }


        // 退出登录
        //    把登录信息删除   LOGIN_USER
        oOut.onclick = function () {
            // 把登录信息删除
            removeCookie('LOGIN_USER');
            // 跳转到登录
            location.href = './03login.html';
        }


        // 注销账号
        //    把账号信息删除   res.name
        oDel.onclick = function () {
            // 把账号信息删除
            removeCookie('YYDS_' + res);
            // 删除登录信息
            removeCookie('LOGIN_USER');
            // 跳转到登录
            location.href = './03login.html';
        }




        // 显示列表
        const arr = getCookies();
        console.log(arr);
        // 过滤数据   包含YYDS_
        const data = arr.filter(v => v.name.includes('YYDS_'));
        console.log(data);

        let html = '';
        data.forEach(({ name, content }) => {
            html += `
                <tr>
                    <td>${name.replace('YYDS_', '')}</td>
                    <td>${content}</td>
                    <td>
                        <button class="del" onclick="fn('${name}' , this)">删除</button>
                        <button class="change" data-name="${name}">修改</button>
                    </td>
                </tr>
            `
        })
        const oT = document.querySelector('tbody');
        oT.innerHTML = html;


        // oT.onclick = function (e) {
        //     e = e || event;
        //     const target = e.target;
        //     if (target.className === 'del') {
        //         const name = target.parentElement.previousElementSibling.previousElementSibling.innerHTML;
        //         removeCookie('YYDS_' + name);
        //         target.parentElement.parentElement.remove();
        //         return;
        //     }
        //     if (target.className === 'change') {
        //         const newPwd = prompt('请输入新的密码');
        //         if (newPwd) {
        //             const name = target.parentElement.previousElementSibling.previousElementSibling.innerHTML;
        //             setCookie('YYDS_' + name, newPwd);
        //             // 页面也要修改
        //             target.parentElement.previousElementSibling.innerHTML = newPwd;
        //         }

        //     }
        // }




        function fn(name, _this) {
            console.log(_this);  // window
            removeCookie(name);
            _this.parentElement.parentElement.remove();
        }

    </script>

</body>

</html>